<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>ajax初体验</h1>
  <button id="btn">发送Ajax请求</button>
  <script>
    //1.获取按钮注册店家事件
    document.getElementById('btn').onclick = function(){
      //2.发送Ajax请求，请求后端(服务器)http://127.0.0.1:3000/api/getStr
      //① 实例化xhr对象
      var xhr = getXhr();

      //② 调用open方法准备Ajax请求
      // 参数一：请求方式 get/post
      // 参数二：请求地址
      //   请求地址中可以不写 http://127.0.0.1:3000 ，推荐不写
      //   浏览器会自动补全当前网站的地址：(协议, ip, 端口号)
      xhr.open('get','http://127.0.0.1:3000/api/getStr');

      //③ 调用send()方法发送Ajax请求
      xhr.send();
    };

    function getXhr(){
      var xhr = '';
      //判断window对象中有没有XMLHttpRequest对象
      if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
      }else{
        xhr = new ActiveXObject('Msxml2.XMLHTTP');
      };
      return xhr;
    };
  </script>
</body>
</html> -->


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>ajax初体验</h1>
  <button id="btn">发送ajax请求</button>
  <h3 id="h3"></h3>
  <script>
    document.getElementById('btn').onclick = function(){
      var xhr = getXhr();
      //④ 调用onreadystatechange事件监听readyState的值的变化
      // 在创建好xhr对象之后直接调用该事件  该事件触发四次，弹出 1，2，3，4 
      // 如果放在send之后 就无法监听到 readyState == 1 的状态  该事件只触发三次，弹出 2，3，4 
      xhr.onreadystatechange = function(){
        alert(xhr.readyState);
        //当 readyState 值等于4时，浏览器已经接收到后端返回的数据并可以调用了
        if(xhr.readyState == 4){
          //使用 xhr.responseText 来接收后端返回来的数据
          alert(xhr.responseText);
          document.getElementById('h3').innerText = xhr.responseText;
        };
      };
      xhr.open('get','/api/getStr');
      xhr.send();
    }
    function getXhr(){
      var xhr = '';
      if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
      }else{
        xhr = new ActiveXObject('Msxml2.XMLHTTP');
      }
      return xhr;
    }
  </script>
</body>
</html>